<template>
    <div>
        <el-form label-width="100px">
            <el-form-item label="SKU名称">
                <el-input v-model="skuParams.skuName" placeholder="请输入SKU名称" />
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input v-model="skuParams.price" placeholder="请输入价格(元)" type="number" />
            </el-form-item>
            <el-form-item label="重量(克)">
                <el-input v-model="skuParams.weight" placeholder="请输入重量(克)" type="number" />
            </el-form-item>
            <el-form-item label="SKU描述">
                <el-input v-model="skuParams.skuDesc" placeholder="请输入SKU描述" type="textarea" />
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form :inline="true" label-width="100px">
                    <el-form-item v-for="item  in attrArr" :label="item.attrName" :key="item.id">
                            <el-select v-model="item.attrIdAndValueId" placeholder="请选择" style="width: 200px;">
                                <el-option :value="`${item.id}:${attrValue.id}`" v-for="attrValue in item.attrValueList" :label="attrValue.valueName" :key="attrValue.id"></el-option>
                            </el-select>
                        </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                  <el-form :inline="true" label-width="100px">
                    <el-form-item v-for="item  in saleArr" :label="item.saleAttrName" :key="item.id">
                            <el-select v-model="item.saleIdAndValueId" placeholder="请选择" style="width: 200px;">
                                <el-option :value="`${item.id}:${saleAttrValue.id}`" v-for="saleAttrValue in item.spuSaleAttrValueList" :label="saleAttrValue.saleAttrValueName" :key="saleAttrValue.id"></el-option>
                            </el-select>
                        </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片名称">
                <el-table border :data="imgArr" ref="table" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="60" />
                    <el-table-column label="图片" >
                        <template #default="scope">
                            <img  style="width: 60px;height: 60px;" :src="scope.row.imgUrl"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="imgName">
                    </el-table-column>
                     <el-table-column label="操作" >
                        <template #default="scope">
                             <el-button type="warning" @click="handler(scope.row)" :disabled="selectedRow?.id == scope.row.id">
                                {{ selectedRow?.id == scope.row.id ? '已设为默认':'设为默认'}}
                             </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                 <el-button type="primary" @click="save">保存</el-button>
                 <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts" >
import {ref,reactive} from 'vue'
import { reqAttr } from '@/api/product/attr';
import { reqSpuImageList,reqSpuHasSaleAttr,reqAddSku } from '@/api/product/spu';
import type { SkuData } from '@/api/product/spu/type';
import { ElMessage } from 'element-plus'
// 平台属性
let attrArr = ref<any>([])
//销售属性
let saleArr = ref<any>([])
//照片的数据
let imgArr = ref<any>([])
let table = ref<any>()
let selectedRow = ref<any>(null)
let skuParams = reactive<SkuData>({
      category3Id: '', //三级分类的ID
      spuId: '', //已有的SPU的ID
      tmId: '' ,//SPU品牌的ID
      skuName: '',//sku名字
      price: '', //sku价格
      weight: '', //sku重量
      skuDesc: '', //sku的描述
      skuAttrValueList: [],
      skuSaleAttrValueList: [],
      skuDefaultImg: '' //sku图片地址
})
const initSkuData =  async(c1:number|string,c2:number|string,row:any)=>{
     // 重置数据
  attrArr.value = []
  saleArr.value = []
  imgArr.value = []
  selectedRow.value = null
  skuParams.category3Id = ''
  skuParams.spuId = ''
  skuParams.tmId = ''
  skuParams.skuName = ''
  skuParams.price = ''
  skuParams.weight = ''
  skuParams.skuDesc = ''
  skuParams.skuAttrValueList = []
  skuParams.skuSaleAttrValueList = []
  skuParams.skuDefaultImg = ''

  //-----------从新赋值
    skuParams.category3Id = row.category3Id
    skuParams.spuId = row.id
    skuParams.tmId = row.tmId
    //获取平台属性
    let res = await reqAttr(c1,c2,row.category3Id)
    // 获取销售属性
    let res1 = await reqSpuHasSaleAttr(row.id)
    // 获取照片的数据
    let res2 = await reqSpuImageList(row.id)
    attrArr.value = res.data
    saleArr.value = res1.data
    imgArr.value = res2.data

}

const handler = (row: any) => {
  if (!imgArr.value || !table.value) return
  selectedRow.value = row
  skuParams.skuDefaultImg = row.imgUrl
}
//图片
const handleSelectionChange = (selection:any[])=>{
    if(selection.length > 0){
        const row = selection[0]
        handler(row)
    }

}
//点击确定
const save = async()=>{
    //处理数据
    skuParams.skuAttrValueList = attrArr.value.reduce((prev:any,next:any)=>{
        if(next.attrIdAndValueId){
            let [arrrId,valueId] = next.attrIdAndValueId.split(':')
            prev.push({
                arrrId,
                valueId
            })
        }
        return prev
    },[])
    skuParams.skuSaleAttrValueList = saleArr.value.reduce((prev:any,next:any)=>{
        if(next.saleIdAndValueId){
            let [saleAttrId,saleAttrValueId] = next.saleIdAndValueId.split(':')
            prev.push({
                saleAttrId,
                saleAttrValueId
            })
        }
        return prev
    },[])
    let res = await reqAddSku(skuParams)
    if(res.code == 200){
        ElMessage({
            type:'success',
            message:'添加SKU成功'
        })
        $emit('changeScene',{scene:0,params:''})
    }else{
        ElMessage({
            type:'success',
            message:'添加SKU失败'
        })
    }
    
}
//点击取消
const cancel = ()=>{
    console.log('点击了')
    $emit('changeScene',{scene:0,params:''})
}
let $emit = defineEmits(['changeScene'])
//导出
defineExpose({initSkuData})


</script>
<style>
</style>